<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<title>资招评测</title>
	<link rel="stylesheet" type="text/css" href="../../build/css/base.css"/>
	<link rel="stylesheet" type="text/css" href="../../build/css/main.css">
	<link rel="stylesheet" type="text/css" href="../../build/css/find.css">
</head>
<body>
	<div id="container" class="assess" style="padding-bottom: 50px;">
		<div class="top">
			<div class="banner"  v-if="!isFocus" style="height:auto;">
				<img src="../../build/images/findBanner.png" alt="图片加载失败" width="100%" style="display: block;" />		
		    </div>
		<div class="search">
			<span class="iconfont">&#xe601;</span>
			<input type="text" id="inputVlaue" placeholder="大家都在搜:想挣钱，我给你支一招儿" @click="inputFocus" @keyup.enter="searchEnter" v-model="inputValue" v-bind:class="{active:isFocus}"/>
			<button type="button" v-if="isFocus" @click="backBtn">取消</button>
		</div>	
	</div>
	
	
	
	<div class="search-bac" v-if="isFocus">
		<div class="history-list-wrap">
			<p><span class="iconfont">&#xe627;</span>历史搜索</p>
			<ul>
				<li class="history-list" v-for="history in historyList">
					<span class="name" @click="hisSearch(history.keywords)">{{history.keywords}}</span>
					<span class="iconfont" @click="clear(history.idStr)">&#xe624;</span>
				</li>
			</ul>
			<button type="button" @click="clearAll" v-if="historyList.length != 0">清空搜索记录</button>
		</div>
	</div>
	
		<find-menu v-if="!isFocus"></find-menu>
		<div class="selected"  v-if="!isFocus">
			<div class="title"><span>精选推荐</span></div>
			<div class="product-list">
				<a class="product" v-for="(item,index) in selectedData" v-bind:href="item.idStr2" style="overflow:hidden;">
					<img v-bind:src="item.pictureUrl2" style="width:auto;height:150px;" />
					<p class="title">{{item.title}}</p>
				</a>
			</div>
		</div>
		<div class="empetDate" v-if="! selectedData.length"  style="display: block;margin-top:100px;">
			<span class="iconfont">&#xe602;</span>
			抱歉！没找到更多数据
		</div>
		<my-footer></my-footer>
	</div>
	<script type="text/javascript" src="../../build/js/jquery.min.js" charset="UTF-8"></script>
	<script type="text/javascript" src="../../build/public/vue.js" charset="utf-8"></script>
	<script type="text/javascript" src="../../build/public/base.js" charset="utf-8"></script>
	<script type="text/javascript" src="../../build/js/config.js" charset="utf-8"></script>
	<script type="text/javascript" src="../../build/js/common.js" charset="utf-8"></script>
	<script type="text/javascript" src="../../build/js/template.js" charset="UTF-8"></script>
	<script type="text/javascript" src="../../build/public/vue-resource.js" charset="utf-8"></script>
	<script type="text/javascript">
		var vm = new Vue({
			el:"#container",
			data:{
				bannerImg:'',
				selectedData:[],
				historyList:[],
				page:1,
				inputValue:'',
				isFocus:false,
				assessTypeId:''
			},
			mounted:function(){
				this.$nextTick(function(){
					refresh(this.refreshData());    //监听滚动到底部->触发refreshData()
				})
			},
			methods:{
				init:function(){
					//初始化
					this.getBannerImg()
					this.getFindTypeId()
					this.getSelectedList()
				},
				getBannerImg:function(){
					//获取banner图
					noParamsGet('/discovery/picture',function(res){
						vm.bannerImg =domain+res.data.pictureUrl
					},function(res){
						console.log(res.error)
					})
				},
				getFindTypeId:function(){
					noParamsGet('/discovery/opinion-category/list',function(res){
						window.localStorage.setItem('assessIdStr',res.data[0].idStr)
						window.localStorage.setItem('hotspotIdStr',res.data[1].idStr)
						window.localStorage.setItem('interestStr',res.data[2].idStr)
						window.localStorage.setItem('encyclopediasIdStr',res.data[3].idStr)
					},function(res){
						console.log(res.error)
					})
				}
				,
				getSelectedList:function(){	
					//获取精选数据
					loader.init();    //初始化加载提示	
					noParamsGet('/discovery/opinion-category/list',function(res){
						vm.assessTypeId = res.data[0].idStr
						console.log('vm.assessTypeId = '+vm.assessTypeId)
						get('/discovery/opinion/list',{
							currentPage:vm.page,
							opinionCategoryId:vm.assessTypeId,
							deviceType:'WECHAT'
						},function(res){
							vm.selectedData = vm.selectedData.concat(res.data)//数据累加
							if(res.data.length < 7){
								refreshText('到底了哦！')
							}else{
								refreshText('上拉加载更多数据')
							}
							if(vm.selectedData.length <7){
								refreshText('')
							}
							for(var i=0;i<vm.selectedData.length;i++){
								vm.selectedData[i].idStr2 = 'detail.html?idStr=' + vm.selectedData[i].idStr
								vm.selectedData[i].pictureUrl2 = domain + vm.selectedData[i].pictureUrl
							}
							
							if(vm.selectedData.length < 6){
								refreshText('')
							}
							loader.remove()
						},function(res){
							toast(res.error)
						})
					},function(res){
						toast(res.error)
					})				
				},				
				refreshData:function(){
					//上拉加载数据
					return function(){
						vm.page++;
						vm.getSelectedList();
					}
				},				
				searchEnter:function(){
					//搜索产品
					console.log(vm.inputValue);
					if(vm.inputValue == ''){
						toast('请输入搜索条件');
						return
					}
					window.location.href = '../product/search.html?keyWord='+vm.inputValue;					
				},
				hisSearch:function(keywords){
					//点击产品名称，搜索产品
					vm.inputValue = keywords;
					window.location.href = '../product/search.html?keyWord='+vm.inputValue;	
				},
				inputFocus:function(){
					//输入框获取焦点
					vm.isFocus = true
					refreshText('')
					$("#inputVlaue").css({'width':'75%','left':'10px'})
					$(".search .iconfont").css({'left':'5%'})

					if(vm.isFocus==true){
						$('.empetDate').hide();
					}
					noParamsGet('/advisor/home/keywords-history',function(res){
						vm.historyList = res.data
						if(vm.historyList.length > 10){  //保留10条搜索结果
							vm.historyList = vm.historyList.splice(0,10)
						}
					},function(res){
						console.log(res.error)
					})
				},
				backBtn:function(){
					//取消搜索
					vm.isFocus = false
					refreshText('上拉加载更多数据哦！')
					vm.inputValue = ''
					$("#inputVlaue").css({'width':'80%'})
					$(".search .iconfont").css({'left':'10%'})
				},
				clear:function(id){
					//清除单个记录
					post('/advisor/home/keywords-history/remove',{keywordsHistoryIdStr:id},function(res){
						vm.inputFocus()
						toast('已删除')
					},function(res){
						toast(res.error)
					})
				},
				clearAll:function(){
					//清除所有记录
					noParamsPost('/advisor/home/keywords-history/clear',function(res){
						vm.inputFocus()
						toast('已清空')
					},function(res){
						toast(res.data)
					})
				}
			},
			created:function(){
				this.init()
			}
			
		})
	</script>
</body>
</html>